<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <link rel="stylesheet" href="./css/base.css">
  <script src="./js/base.js"></script>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
  <script src="./swiper/swiper-bundle.min.js"></script>
</head>

<body>
  <div id="index">
    <div class="container">
      <div class="top-bg">
        <div class="title">小微大益</div>
        <!-- swiper组件位置 -->
        <div class="banner swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="https://file.buying.yunmaibaoguo.com/act/MEMBER/2023/8/28b0c1eab6eff5c26e0f6ff46fb8416c.png" />
            </div>
          </div>
        </div>
      </div>
      <div class="main-container">
        <div class="activity-box">
          <div class="title-row">
            <div class="act-title">
              活动推荐
            </div>
            <a url="../actList/index" class="more">查看更多></a>
          </div>
          <div class="act-list">
            <div class="act-item" v-for="item,index in actList">
              <a class="act-item" url="../../pages/actDetail/index?id={{obj.id}}">
                <img class="act-img" :src="item.coverImage" />
                <div class="act-info">
                  <div class="act-name">{{item.title}}</div>
                  <div class="act-sub-info">
                    <div class="icon-box">
                      <img class="biao-icon" src="./images/biao_icon.png" />
                    </div>
                    <div class="info-v">{{new Date(item.signUpStartDate).format('MM.dd') }}-{{new
                      Date(item.signUpEndDate).format('MM.dd')}}</div>
                  </div>
                  <div class="act-sub-info">
                    <div class="icon-box">
                      <img class="address-icon" src="./images/address_icon.png" />
                    </div>
                    <div class="info-v">{{item.areaName}}</div>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tabbar">
      <a href="./index.html" class="tab-item">
        <img src="./images/home_act.png" alt="">
        <span class="tab-text">首页</span>
      </a>
      <a href="./user.html" class="tab-item">
        <img src="./images/my.png" alt="">
        <span class="tab-text">我的</span>
      </a>
    </div>
  </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/data.js"></script>
<script src="./js/date.js"></script>
<script>
  var app = new Vue({
    el: '#index',
    data () {
      return {
        actList: list
      }
    },
    created () {
      var swiper = new Swiper(".mySwiper", {
        autoplay: true
      });
    }
  })
</script>

</html>